<!--
 * @Author: Bennty
 * @Date: 2024-11-14 10:39:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-28 16:59:08
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="半成品生产单编辑" width="35%" @close="handleClose">
        <el-form :model="formData" :ref="formRef">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="半成品名">
                        {{ props.orderDetail.specsDetail }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交货日期">
                        {{ props.orderDetail.deliveryDate }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库仓库">
                        <el-select v-model="formData.warehouseType">
                            <el-option v-for="item in props.entrepot" :key="item.value" :value="item.value" :label="item.label" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="生产工序"></el-form-item>
            <div class="process-container">
                <el-row>
                    <el-col v-for="(item, index) in factoryData" :key="item.workProcedureId" :span="5">
                        <el-dropdown
                            trigger="click"
                            style="min-width:80%;margin-bottom: 20px"
                            @command="handleCommand"
                        >
                        <el-tag size="large" type="info" @click="handleClickTag(item)" style="width:100%" >{{ `${item.workProcedureName}  ${item.companyName || ''}` }}</el-tag>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="factory in factories" :key="factory.id" :command="{factory,index}" >{{ factory.companyName }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </div>
            <el-form-item label="纸张信息">
            </el-form-item>
            <el-row :gutter="10">
                <el-col :span="5">
                    <el-form-item label="纸张类别：">
                        <span style="font-weight: bolder">{{ props.orderDetail.paperName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="纸张克重：">
                        <span style="font-weight: bolder">{{ `${props.orderDetail.weight} 克` }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="长度：">
                        <span style="font-weight: bolder">{{ `${props.orderDetail.length} mm` }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="宽度：">
                        <span style="font-weight: bolder">{{ `${props.orderDetail.width} mm` }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="能切套数：">
                        <span style="font-weight: bolder">{{ `${props.orderDetail.numberOfSets}` }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="生产数量：" prop="produceNumber">
                        <el-input v-model="formData.produceNumber" type="number" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用纸数量：" prop="paperUseNumber">
                        <el-input v-model="formData.paperUseNumber" type="number" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="刀版信息：">
                        <span style="font-weight: bolder">{{ `${props.orderDetail.knifePlateName}` }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClickSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { editSemiProductOrderApi } from '@/api/sj/productManagement/semiProductOrder/index';
import { getSupplierByProcessIdApi } from '@/api/sj/purchaseManagement/supplierManagement';

const props = defineProps<{
    visible: boolean,
    entrepot: any[],
    orderDetail: any
}>();
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();
const formData = ref<any>({
    warehouseType: undefined,
    paperUseNumber: undefined,
    produceNumber: undefined,
});

const factoryData = ref<any[]>([]);

const factories = ref<any[]>([]);

watch(()=>props.orderDetail, (newData)=>{
    if(newData.workProcedureJoinOuters){
        factoryData.value = newData.workProcedureJoinOuters.map((item: any)=>{
            return {
                workProcedureId: item.workProcedureId,
                companyName: undefined,
                workProcedureName:item.workProcedureName,
                supplyFactoriesId: undefined

            }
        });
    };
})

const handleClickTag = async (process: any) => {
    const { data } = await getSupplierByProcessIdApi(process.workProcedureId);
    factories.value = data;
};

const handleCommand = (command: {factory:any,index: number}) => {
    factoryData.value[command.index].supplyFactoriesId = command.factory.id;
    factoryData.value[command.index].companyName = command.factory.companyName;
};

const handleClickSubmit = async () => {
    const submitData = {
        id: props.orderDetail.id,
        ...formData.value,
        semiId: props.orderDetail.semiId,
        joinOuterList: [...factoryData.value]
    }
    const { code } = await editSemiProductOrderApi(submitData);
    if(code == 200){
        emits('submit', true);
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close')
};
</script>

<style lang="scss" scoped>
.process-container{
    padding: 15px 25px 5px 25px;
}
</style>